<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
    <script src="js/flexible.js"></script>
    <!-- 引入初始化 css 文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入自己的首页的 css -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- tips -->
    <div class="topTips">
        <div class="close"><img src="images/close.png" alt=""></div>
        <div class="logo"><img src="images/logo1.png" alt=""></div>
        <div class="slogan">打开京东App，购物更轻松</div>
        <div class="openRightNow">立即打开</div>
    </div>
    <!-- search -->

    <header class="searchBar">

        <div class="leftItem">
            <span></span>
        </div>
        <div class="search">
            <div class="searchContent">
                <span></span>
                <i></i>
                <input type="search" placeholder="超薄本">
            </div>
        </div>
        <div class="login">登录</div>

    </header>
    <!-- banner -->
    <main class="content">
        <div class="banner">
            <div class="bannerBg"></div>
            <ul>
                <li>
                    <a href="#"><img src="images/banner01.dpg"></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner01.dpg"></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner01.dpg"></a>
                </li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>

        </div>
        <div class="adsItem">
            <a href="#"><img src="images/banner_bottom_01.dpg"></a>
            <a href="#"><img src="images/banner_bottom_02.dpg"></a>
            <a href="#"><img src="images/banner_bottom_03.dpg"></a>
        </div>
        <div class="nav">
            <div class="navFirst">
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
            </div>
            <div class="navFirst navSecond">
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
                <a href="#">
                    <img src="images/nav01.webp" /><span>美团买菜</span></a>
            </div>
        </div>

        <div class="discount">
            <a> <img src="images/new1.dpg"></a>
            <a> <img src="images/new2.dpg"></a>
        </div>
    </main>

    <div class="bottom">
        <a href="#">
            <div> <i></i> <span>首页</span></div>
        </a>
        <a href="#">
            <div> <i></i> <span>分类</span> </div>
        </a>
        <a href="#">
            <div><i></i> <span>京喜</span></div>
        </a>
        <a href="#">
            <div> <i></i> <span>购物车</span> </div>
        </a>
        <a href="#">
            <div><i></i> <span>个人中心</span></div>
        </a>
    </div>
</body>

</html>